<template>
  <div class="header" :style="opacity">
    <span class="iconfont iconfanhui" @click.stop='handleBackClick' ></span>
    <span class="title">{{title}}</span>
  </div>
</template>

<script>
export default {
  name:'Header',
  props: {
    title: String
  },
  data () {
    return {
      opacity:{ opacity: 0 }
    }
  },
  activated () {
    window.addEventListener('scroll', this._initScroll)
  },
  deactivated () {
    //离开此时页面，移除滚动事件的监听
    window.removeEventListener('scroll', this._initScroll)
  },
  methods: {
    _initScroll () {
      let top = document.documentElement.scrollTop
      if(top > 60 ) {
        let opacity = top / 140
        this.opacity.opacity = opacity
        if(opacity > 1) {
          opacity = 1
          return
        }
      } else {
        this.opacity.opacity = 0
      }
    },
    handleBackClick () {
      this.$router.push('/')
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~css/common.styl'
@import '~css/mixins.styl'
.header
  position fixed
  left 0
  top 0
  height .86rem
  width 100%
  background $bgColor
  opacity 0
  .iconfont
    position absolute
    left .2rem
    top 50%
    transform translateY(-50%)
    color white
  .title 
    position absolute
    left 50%
    top 50%
    transform translate(-50%,-50%) 
    font-size .32rem
    ellipsis()
    color white
   
</style>